<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, student-scalable=no"/>
    <title>${siteName!""}|图书管理-${title!""}</title>
    <#include "../common/header.ftl"/>
    <style>
        td {
            vertical-align: middle;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <div class="lyear-layout-sidebar-scroll">
                <#include "../common/left-menu.ftl"/>
            </div>

        </aside>
        <!--End 左侧导航-->

        <#include "../common/header-menu.ftl"/>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">


                                <form class="pull-right search-bar" method="get" action="/book/list" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn"
                                                    data-toggle="dropdown" type="button" aria-haspopup="true"
                                                    aria-expanded="false">图书名称搜索<span class="caret"></span>
                                            </button>
                                        </div>
                                        <input type="text" id="bookName" class="form-control"
                                               name="bookName" placeholder="请输入图书名称">
                                        <span class="input-group-btn">
                                            <button class="btn btn-primary" type="submit">搜索</button>
                                        </span>
                                    </div>
                                </form>


                                <#include "../common/third-menu.ftl"/>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>图书名称</th>
                                            <th>作者</th>
                                            <th>单价</th>
                                            <th>出版社</th>
                                            <th>所属分类</th>
                                            <th>所属二级分类</th>
                                            <th>状态</th>
                                            <th>借出数量</th>
                                            <th>图书库存</th>
                                            <th>图书简介</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <#if pageBean.content?size gt 0>
                                            <#list pageBean.content as book>
                                                <tr>
                                                    <td style="vertical-align:middle;">
                                                        <label class="lyear-checkbox checkbox-primary">
                                                            <input type="checkbox" name="ids[]"
                                                                   value="${book.id}"><span></span>
                                                        </label>
                                                    </td>
                                                    <td style="vertical-align:middle;" data-id="${book.id}" state="${book.state}">${book.bookName}</td>
                                                    <td style="vertical-align:middle;">${book.author}</td>
                                                    <td style="vertical-align:middle;">${book.price}</td>
                                                    <td style="vertical-align:middle;">${book.press}</td>
                                                    <td style="vertical-align:middle;">
                                                        ${book.category.parent.typeName}
                                                    </td>
                                                    <td style="vertical-align:middle;">${book.category.typeName}</td>
                                                    <td style="vertical-align:middle;">
                                                        <#if book.state??>
                                                            <#if book.state == 0>
                                                                <font style="color: red;">不能借阅</font>
                                                            <#else>
                                                                可借阅
                                                            </#if>

                                                        </#if>
                                                    </td>
                                                    <td style="vertical-align:middle;">${book.num}</td>
                                                    <td style="vertical-align:middle;">${book.cannum}</td>
                                                    <td style="vertical-align:middle;">${book.introduce}</td>
                                                </tr>
                                            </#list>
                                        <#else>
                                            <tr align="center">
                                                <td colspan="9">这里空空如也！</td>
                                            </tr>
                                        </#if>
                                        </tbody>
                                    </table>
                                </div>
                                <#if pageBean.total gt 0>
                                    <ul class="pagination ">
                                        <#if pageBean.currentPage == 1>
                                            <li class="disabled"><span>«</span></li>
                                        <#else>
                                            <li><a href="list?bookName=${bookName!""}&currentPage=1">«</a></li>
                                        </#if>
                                        <#list pageBean.currentShowPage as showPage>
                                            <#if pageBean.currentPage == showPage>
                                                <li class="active"><span>${showPage}</span></li>
                                            <#else>
                                                <li>
                                                    <a href="list?bookName=${bookName!""}&currentPage=${showPage}">${showPage}</a>
                                                </li>
                                            </#if>
                                        </#list>
                                        <#if pageBean.currentPage == pageBean.totalPage>
                                            <li class="disabled"><span>»</span></li>
                                        <#else>
                                            <li>
                                                <a href="list?bookName=${bookName!""}&currentPage=${pageBean.totalPage}">»</a>
                                            </li>
                                        </#if>
                                        <li><span>共${pageBean.totalPage}页,${pageBean.total}条数据</span></li>
                                    </ul>
                                </#if>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->

        <div  id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myLargeModalLabel">图书借阅</h4>
                    </div>
                    <div class="modal-body">
                      <form action="/book/borrow" id="student-add-form" method="post" class="row">
                          <div class="input-group m-b-10">
                              <span class="input-group-addon">选择图书</span>
                              <select name="book.id" class="form-control" id="book">

                              </select>
                          </div>

                          <div class="input-group m-b-10">
                              <span class="input-group-addon">借阅数量:</span>
                              <input type="number" class="form-control required" id="borrowNum" name="borrowNum" min="1"  onchange="if(/\D/.test(this.value)){this.value='1';}"
                                     value="" placeholder="请输入借阅数量" tips="请填写借阅数量"/>
                          </div>

                          <div class="input-group m-b-10">
                              <span class="input-group-addon">预计归还时间:</span>
                              <input type="date" class="form-control required" id="datetime"
                                     name="datetime"  value="${datetime}"/>
                          </div>

                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                              <button type="button" class="btn btn-primary" id="add-form-submit-btn" >点击保存</button>
                          </div>

                      </form>
                    </div>

                </div>
            </div>
        </div>



    </div>
</div>
<#include "../common/footer.ftl"/>
<script type="text/javascript" src="/admin/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/admin/js/main.min.js"></script>
<script type="text/javascript">

<#--    by ld -->
$(document).ready(function () {
    $("#search-btn").click(function(){
        if ($("#bookName").attr('name') == 'bookName') {
            $("#bookName").attr('name','author');
            $("#bookName").attr('placeholder', '请输入图书作者');
            $("#search-btn").html('作者搜索'+'<span class="caret">');
        }else {
            $("#bookName").attr('name','bookName');
            $("#bookName").attr('placeholder', '请输入图书名称');
            $("#search-btn").html('名称搜索'+'<span class="caret">');
        }
    });
});


    $(document).ready(function () {

        $("#add-form-submit-btn").click(function () {
            if (!checkForm("student-add-form")) {
                return;
            }

            var selectVal = $("#book").val();
            if(selectVal == null || selectVal == "0") {
                showErrorMsg("请选择图书");
                return ;
            }
            var data = $("#student-add-form").serialize();

            $.ajax({
                url: 'addBorrow',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        showSuccessMsg('图书借阅成功!', function () {
                            window.location.href = 'list';
                        })
                    } else {
                        showErrorMsg(data.msg);
                    }
                },
                error: function (data) {
                    alert('网络错误!');
                }
            });

        });

    });


    function del(url) {
        if ($("input[type='checkbox']:checked").length != 1) {
            showWarningMsg('请选择一条数据进行删除！');
            return;
        }
        var id = $("input[type='checkbox']:checked").val();
        $.confirm({
            title: '确定删除？',
            content: '删除后数据不可恢复，请慎重！',
            buttons: {
                confirm: {
                    text: '确认',
                    action: function () {
                        deleteReq(id, url);
                    }
                },
                cancel: {
                    text: '关闭',
                    action: function () {

                    }
                }
            }
        });
    }

    //图书借阅
    function borrow(url) {
        var id = $("input[type='checkbox']:checked").val();
        if ($("input[type='checkbox']:checked").length != 1) {
            showWarningMsg('请选择一条数据进行！');
            return;
        }

        var name = $("td[data-id='"+id+"']").html().trim();
        var state = $("td[data-id='"+id+"']").attr("state");
        if(state == "0")
        {
            showWarningMsg('该图书不可借阅！');
            return;
        }
        var option = "<option value='"+id+"'>"+name+"</option>";
        $("#book").html('');
        $("#book").html(option);
        $('#myModal').modal('show');
    }

    function borrowDialog(url)
    {
        var id = $("input[type='checkbox']:checked").val();
        //图书名称   要借数量 预计归还时间  他那个名字还是拿
        var form = $("#myModal").serializeJson();
        form.id = id;
        console.log(form);
        $.ajax({
            url:url,
            type: 'POST',
            data: form,
            dataType: 'json',
            // contentType: 'application/json;charset=UTF-8',
            success: function (data) {

            },
            error: function (data) {
                // alert('网络错误!');
            }
        });
    }

    // 自定义jquery的方法，将Form表单中的内容转换成json
    $.fn.serializeJson = function () {
        var serializeObj = {};
        var array = this.serializeArray();
        var str = this.serialize();
        $(array).each(function () {
            if (serializeObj[this.name]) {
                if ($.isArray(serializeObj[this.name])) {
                    serializeObj[this.name].push(this.value);
                } else {
                    serializeObj[this.name] = [serializeObj[this.name], this.value];
                }
            } else {
                serializeObj[this.name] = this.value;
            }
        });
        return serializeObj;
    };

    //打开编辑页面
    function edit(url) {
        if ($("input[type='checkbox']:checked").length != 1) {
            showWarningMsg('请选择一条数据进行编辑！');
            return;
        }
        window.location.href = url + '?id=' + $("input[type='checkbox']:checked").val();
    }

    //调用删除方法
    function deleteReq(id, url) {
        $.ajax({
            url: url,
            type: 'POST',
            data: {id: id},
                dataType: 'json',
                        success: function (data) {
                if (data.code == 0) {
                    showSuccessMsg('图书删除成功!', function () {
                        $("input[type='checkbox']:checked").parents("tr").remove();
                    })
                } else {
                    showErrorMsg(data.msg);
                }
            },
            error: function (data) {
                alert('网络错误!');
            }
        });
    }



    //调用删除方法
    // function borrow(id, url) {
    //
    //     $.ajax({
    //         url: url,
    //         type: 'POST',
    //         data: {id: id},
    //         dataType: 'json',
    //         success: function (data) {
    //             if (data.code == 0) {
    //                 showSuccessMsg('图书借阅成功!', function () {
    //                     // $("input[type='checkbox']:checked").parents("tr").remove();
    //                 })
    //             } else {
    //                 showErrorMsg(data.msg);
    //             }
    //         },
    //         error: function (data) {
    //             alert('网络错误!');
    //         }
    //     });
    // }
</script>
</body>
</html>
